import React, { useState } from 'react';
import { Button } from '../components/Button';
import { ImageWithLoading } from '../components/ImageWithLoading';
import { ArrowRight, Star, ChevronDown, ChevronUp, Filter, SortDesc, CheckCircle, Award, Zap, DollarSign, Clock } from 'lucide-react';
import { usePageTitle, PAGE_TITLES } from '../lib/usePageTitle';

export function GuidesPage() {
  usePageTitle(PAGE_TITLES.GUIDES);
  
  const [sortOpen, setSortOpen] = useState(false);
  const [filterOpen, setFilterOpen] = useState(false);
  const [activeTab, setActiveTab] = useState('all');
  const [expandedFAQ, setExpandedFAQ] = useState<number | null>(0); // 默认展开第一个FAQ

  const toggleFAQ = (index: number) => {
    setExpandedFAQ(expandedFAQ === index ? null : index);
  };

  const handleKeyDown = (event: React.KeyboardEvent, index: number) => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      toggleFAQ(index);
    }
  };

  const faqData = [
    {
      question: "How often should I use a massage gun?",
      answer: "For general maintenance, 1-2 sessions per day of 2-3 minutes per muscle group is sufficient. For acute soreness or as part of a warm-up/cool-down routine, you may use it more frequently. Always listen to your body and avoid overuse on any single area."
    },
    {
      question: "Are massage guns worth the investment?",
      answer: "For active individuals, those with chronic muscle tension, or anyone who regularly pays for massage therapy, a quality massage gun can provide excellent ROI. A $300 device costs less than 3-4 professional massage sessions in most areas, while providing on-demand relief for years."
    },
    {
      question: "Can massage guns help with muscle growth?",
      answer: "While massage guns primarily aid in recovery rather than directly stimulating muscle growth, faster recovery can allow for more frequent or intense training sessions. Some research suggests that percussion therapy may temporarily increase blood flow to treated areas, which could support the recovery processes necessary for muscle adaptation."
    },
    {
      question: "Are there areas I should avoid with a massage gun?",
      answer: "Yes. Avoid using massage guns directly on bones, joints, nerves, or injured areas. Specific areas to avoid include the front of the neck, spine, face, genitals, and any areas with acute inflammation, broken skin, or blood clots. When in doubt, consult a healthcare professional."
    }
  ];
  return <div className="w-full bg-[#0a2540] text-white">
      {/* Hero Section */}
      <section className="relative w-full h-[50vh] md:h-[60vh] flex items-center">
        <div className="absolute inset-0 z-0">
          <div className="absolute inset-0 bg-gradient-to-b from-[#0a2540] via-transparent to-[#0a2540] opacity-90 z-10"></div>
          <ImageWithLoading 
            src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" 
            alt="Person using massage gun for recovery" 
            className="w-full h-full" 
          />
        </div>
        <div className="container mx-auto px-4 md:px-8 relative z-10">
          <div className="max-w-4xl">
            <span className="inline-block bg-[#06d6a0] text-[#0a2540] text-sm font-bold px-3 py-1 rounded mb-6">
              BUYING GUIDE
            </span>
            <h1 className="text-4xl md:text-6xl font-extrabold leading-tight mb-6">
              THE BEST MASSAGE GUNS OF 2024
            </h1>
            <p className="text-xl md:text-2xl mb-8 text-gray-200 max-w-3xl">
              We tested 15+ massage guns over 300 hours to help you find the
              perfect recovery tool for your needs, body type, and budget.
            </p>
          </div>
        </div>
      </section>
      {/* Quick Navigation */}
      <section className="py-8 px-4 md:px-8 bg-[#061a2c] sticky top-0 z-40">
        <div className="container mx-auto">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-xl font-bold mb-6">Jump to Recommendations:</h2>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <a href="#best-overall" className="flex flex-col items-center bg-[#0a2540] p-4 rounded-lg hover:bg-[#0c2d4e] transition-colors">
                <div className="w-10 h-10 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mb-2">
                  <Award className="text-[#06d6a0]" size={20} />
                </div>
                <span className="text-center font-medium">Best Overall</span>
              </a>
              <a href="#best-value" className="flex flex-col items-center bg-[#0a2540] p-4 rounded-lg hover:bg-[#0c2d4e] transition-colors">
                <div className="w-10 h-10 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mb-2">
                  <DollarSign className="text-[#06d6a0]" size={20} />
                </div>
                <span className="text-center font-medium">Best Value</span>
              </a>
              <a href="#best-premium" className="flex flex-col items-center bg-[#0a2540] p-4 rounded-lg hover:bg-[#0c2d4e] transition-colors">
                <div className="w-10 h-10 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mb-2">
                  <Zap className="text-[#06d6a0]" size={20} />
                </div>
                <span className="text-center font-medium">Best Premium</span>
              </a>
              <a href="#best-portable" className="flex flex-col items-center bg-[#0a2540] p-4 rounded-lg hover:bg-[#0c2d4e] transition-colors">
                <div className="w-10 h-10 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mb-2">
                  <Clock className="text-[#06d6a0]" size={20} />
                </div>
                <span className="text-center font-medium">Most Portable</span>
              </a>
            </div>
          </div>
        </div>
      </section>
      {/* Comparison Table */}
      <section className="py-12 px-4 md:px-8">
        <div className="container mx-auto">
          <div className="max-w-4xl mx-auto">
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
              <h2 className="text-2xl md:text-3xl font-bold">
                Summary Comparison
              </h2>
              <div className="flex mt-4 md:mt-0">
                <div className="relative mr-2">
                  <button onClick={() => setFilterOpen(!filterOpen)} className="flex items-center bg-[#061a2c] px-4 py-2 rounded-lg">
                    <Filter size={18} className="mr-2" />
                    Filter
                    {filterOpen ? <ChevronUp size={18} className="ml-2" /> : <ChevronDown size={18} className="ml-2" />}
                  </button>
                  {filterOpen && <div className="absolute top-full right-0 mt-2 w-48 bg-[#061a2c] rounded-lg shadow-lg z-20 p-4">
                      <div className="space-y-2">
                        <button onClick={() => setActiveTab('all')} className={`w-full text-left px-3 py-2 rounded ${activeTab === 'all' ? 'bg-[#0a2540]' : 'hover:bg-[#0a2540]'}`}>
                          All Massage Guns
                        </button>
                        <button onClick={() => setActiveTab('premium')} className={`w-full text-left px-3 py-2 rounded ${activeTab === 'premium' ? 'bg-[#0a2540]' : 'hover:bg-[#0a2540]'}`}>
                          Premium ($300+)
                        </button>
                        <button onClick={() => setActiveTab('mid')} className={`w-full text-left px-3 py-2 rounded ${activeTab === 'mid' ? 'bg-[#0a2540]' : 'hover:bg-[#0a2540]'}`}>
                          Mid-Range ($150-300)
                        </button>
                        <button onClick={() => setActiveTab('budget')} className={`w-full text-left px-3 py-2 rounded ${activeTab === 'budget' ? 'bg-[#0a2540]' : 'hover:bg-[#0a2540]'}`}>
                          Budget (Under $150)
                        </button>
                      </div>
                    </div>}
                </div>
                <div className="relative">
                  <button onClick={() => setSortOpen(!sortOpen)} className="flex items-center bg-[#061a2c] px-4 py-2 rounded-lg">
                    <SortDesc size={18} className="mr-2" />
                    Sort
                    {sortOpen ? <ChevronUp size={18} className="ml-2" /> : <ChevronDown size={18} className="ml-2" />}
                  </button>
                  {sortOpen && <div className="absolute top-full right-0 mt-2 w-48 bg-[#061a2c] rounded-lg shadow-lg z-20 p-4">
                      <div className="space-y-2">
                        <button className="w-full text-left px-3 py-2 rounded hover:bg-[#0a2540]">
                          Rating (High to Low)
                        </button>
                        <button className="w-full text-left px-3 py-2 rounded hover:bg-[#0a2540]">
                          Price (Low to High)
                        </button>
                        <button className="w-full text-left px-3 py-2 rounded hover:bg-[#0a2540]">
                          Price (High to Low)
                        </button>
                        <button className="w-full text-left px-3 py-2 rounded hover:bg-[#0a2540]">
                          Stall Force (High to Low)
                        </button>
                      </div>
                    </div>}
                </div>
              </div>
            </div>
            <div className="overflow-x-auto bg-[#061a2c] rounded-lg">
              <table className="w-full text-left">
                <thead>
                  <tr className="border-b-2 border-[#1a3a5c]">
                    <th className="p-4">Model</th>
                    <th className="p-4">Best For</th>
                    <th className="p-4">Price</th>
                    <th className="p-4">Stall Force</th>
                    <th className="p-4">Amplitude</th>
                    <th className="p-4">Rating</th>
                    <th className="p-4"></th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-b border-[#1a3a5c]">
                    <td className="p-4 font-medium">Theragun Pro</td>
                    <td className="p-4">
                      <span className="bg-[#06d6a0] bg-opacity-20 text-[#06d6a0] text-xs font-medium px-2 py-1 rounded">
                        Best Premium
                      </span>
                    </td>
                    <td className="p-4">$599</td>
                    <td className="p-4">60 lbs</td>
                    <td className="p-4">16 mm</td>
                    <td className="p-4">
                      <div className="flex items-center">
                        <div className="flex text-[#f8961e]">
                          <Star size={16} fill="#f8961e" />
                          <Star size={16} fill="#f8961e" />
                          <Star size={16} fill="#f8961e" />
                          <Star size={16} fill="#f8961e" />
                          <Star size={16} fill="#f8961e" />
                        </div>
                        <span className="ml-2 text-sm font-medium">4.8</span>
                      </div>
                    </td>
                    <td className="p-4">
                      <a href="/reviews/theragun-pro" className="text-[#06d6a0] text-sm font-medium flex items-center">
                        Details <ArrowRight size={14} className="ml-1" />
                      </a>
                    </td>
                  </tr>
                  <tr className="border-b border-[#1a3a5c]">
                    <td className="p-4 font-medium">Ekrin B37</td>
                    <td className="p-4">
                      <span className="bg-[#06d6a0] bg-opacity-20 text-[#06d6a0] text-xs font-medium px-2 py-1 rounded">
                        Best Overall
                      </span>
                    </td>
                    <td className="p-4">$329</td>
                    <td className="p-4">56 lbs</td>
                    <td className="p-4">12 mm</td>
                    <td className="p-4">
                      <div className="flex items-center">
                        <div className="flex text-[#f8961e]">
                          <Star size={16} fill="#f8961e" />
                          <Star size={16} fill="#f8961e" />
                          <Star size={16} fill="#f8961e" />
                          <Star size={16} fill="#f8961e" />
                          <Star size={16} fill="#f8961e" strokeWidth={1} />
                        </div>
                        <span className="ml-2 text-sm font-medium">4.5</span>
                      </div>
                    </td>
                    <td className="p-4">
                      <a href="/reviews/ekrin-b37" className="text-[#06d6a0] text-sm font-medium flex items-center">
                        Details <ArrowRight size={14} className="ml-1" />
                      </a>
                    </td>
                  </tr>
                  <tr className="border-b border-[#1a3a5c]">
                    <td className="p-4 font-medium">Hypervolt 2 Pro</td>
                    <td className="p-4">
                      <span className="bg-[#06d6a0] bg-opacity-20 text-[#06d6a0] text-xs font-medium px-2 py-1 rounded">
                        Quietest
                      </span>
                    </td>
                    <td className="p-4">$399</td>
                    <td className="p-4">35 lbs</td>
                    <td className="p-4">14 mm</td>
                    <td className="p-4">
                      <div className="flex items-center">
                        <div className="flex text-[#f8961e]">
                          <Star size={16} fill="#f8961e" />
                          <Star size={16} fill="#f8961e" />
                          <Star size={16} fill="#f8961e" />
                          <Star size={16} fill="#f8961e" />
                          <Star size={16} />
                        </div>
                        <span className="ml-2 text-sm font-medium">4.0</span>
                      </div>
                    </td>
                    <td className="p-4">
                      <a href="/reviews/hypervolt-2-pro" className="text-[#06d6a0] text-sm font-medium flex items-center">
                        Details <ArrowRight size={14} className="ml-1" />
                      </a>
                    </td>
                  </tr>
                  <tr className="border-b border-[#1a3a5c]">
                    <td className="p-4 font-medium">Bob and Brad Q2</td>
                    <td className="p-4">
                      <span className="bg-[#06d6a0] bg-opacity-20 text-[#06d6a0] text-xs font-medium px-2 py-1 rounded">
                        Best Value
                      </span>
                    </td>
                    <td className="p-4">$129</td>
                    <td className="p-4">32 lbs</td>
                    <td className="p-4">10 mm</td>
                    <td className="p-4">
                      <div className="flex items-center">
                        <div className="flex text-[#f8961e]">
                          <Star size={16} fill="#f8961e" />
                          <Star size={16} fill="#f8961e" />
                          <Star size={16} fill="#f8961e" />
                          <Star size={16} />
                          <Star size={16} />
                        </div>
                        <span className="ml-2 text-sm font-medium">3.0</span>
                      </div>
                    </td>
                    <td className="p-4">
                      <a href="/reviews/bob-and-brad-q2" className="text-[#06d6a0] text-sm font-medium flex items-center">
                        Details <ArrowRight size={14} className="ml-1" />
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td className="p-4 font-medium">Renpho Mini</td>
                    <td className="p-4">
                      <span className="bg-[#06d6a0] bg-opacity-20 text-[#06d6a0] text-xs font-medium px-2 py-1 rounded">
                        Most Portable
                      </span>
                    </td>
                    <td className="p-4">$79</td>
                    <td className="p-4">20 lbs</td>
                    <td className="p-4">9 mm</td>
                    <td className="p-4">
                      <div className="flex items-center">
                        <div className="flex text-[#f8961e]">
                          <Star size={16} fill="#f8961e" />
                          <Star size={16} fill="#f8961e" />
                          <Star size={16} fill="#f8961e" />
                          <Star size={16} />
                          <Star size={16} />
                        </div>
                        <span className="ml-2 text-sm font-medium">3.2</span>
                      </div>
                    </td>
                    <td className="p-4">
                      <a href="/reviews/renpho-mini" className="text-[#06d6a0] text-sm font-medium flex items-center">
                        Details <ArrowRight size={14} className="ml-1" />
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>
      {/* Best Overall */}
      <section id="best-overall" className="py-16 px-4 md:px-8 bg-[#061a2c]">
        <div className="container mx-auto">
          <div className="max-w-4xl mx-auto">
            <div className="flex items-center mb-6">
              <div className="w-12 h-12 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mr-4">
                <Award className="text-[#06d6a0]" size={24} />
              </div>
              <h2 className="text-3xl font-bold">Best Overall: Ekrin B37</h2>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
              <div>
                <ImageWithLoading 
                  src="https://images.unsplash.com/photo-1616279969856-759f316a5ac1?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                  alt="Ekrin B37 Massage Gun" 
                  className="rounded-lg w-full h-auto" 
                />
              </div>
              <div>
                <div className="flex items-center mb-4">
                  <div className="flex text-[#f8961e] mr-2">
                    <Star size={20} fill="#f8961e" />
                    <Star size={20} fill="#f8961e" />
                    <Star size={20} fill="#f8961e" />
                    <Star size={20} fill="#f8961e" />
                    <Star size={20} fill="#f8961e" strokeWidth={1} />
                  </div>
                  <span className="font-bold">4.5/5.0</span>
                </div>
                <div className="bg-[#0a2540] p-6 rounded-lg mb-6">
                  <h3 className="text-xl font-bold mb-4">
                    Why It's Our Top Pick
                  </h3>
                  <ul className="space-y-3">
                    <li className="flex">
                      <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={18} />
                      <p>
                        Best balance of performance and price with 56lb stall
                        force
                      </p>
                    </li>
                    <li className="flex">
                      <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={18} />
                      <p>Lifetime warranty (unmatched in the industry)</p>
                    </li>
                    <li className="flex">
                      <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={18} />
                      <p>Ergonomic 15° angled handle reduces wrist strain</p>
                    </li>
                    <li className="flex">
                      <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={18} />
                      <p>8-hour battery life (longest in its class)</p>
                    </li>
                  </ul>
                </div>
                <div className="mb-6">
                  <span className="text-gray-300 mr-4">Price:</span>
                  <span className="text-xl font-bold">$329</span>
                </div>
                <div className="flex flex-col sm:flex-row gap-4">
                  <Button href="/reviews/ekrin-b37">Read Full Review</Button>
                  <Button href="https://www.amazon.com/example" variant="secondary">
                    Check Price
                  </Button>
                </div>
              </div>
            </div>
            <p className="text-gray-300 mb-4">
              The Ekrin B37 strikes the perfect balance between
              professional-grade performance and reasonable pricing, making it
              our top overall recommendation for most users.
            </p>
            <p className="text-gray-300 mb-4">
              In our testing, its 56lb stall force was sufficient for even the
              densest muscle groups, while the 12mm amplitude delivered
              effective deep tissue treatment. The 15° angled handle design
              proved to be a game-changer for treating hard-to-reach areas,
              reducing wrist strain by approximately 30% compared to standard
              straight-handle designs.
            </p>
            <p className="text-gray-300">
              While it doesn't have the app integration of the Theragun Pro or
              the ultra-quiet operation of the Hypervolt 2 Pro, the Ekrin B37
              excels in every core function at a significantly lower price
              point. Its lifetime warranty also demonstrates the manufacturer's
              confidence in the product's durability.
            </p>
          </div>
        </div>
      </section>
      {/* Best Value */}
      <section id="best-value" className="py-16 px-4 md:px-8">
        <div className="container mx-auto">
          <div className="max-w-4xl mx-auto">
            <div className="flex items-center mb-6">
              <div className="w-12 h-12 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mr-4">
                <DollarSign className="text-[#06d6a0]" size={24} />
              </div>
              <h2 className="text-3xl font-bold">
                Best Value: Bob and Brad Q2
              </h2>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8 md:flex-row-reverse">
              <div className="order-1 md:order-2">
                <ImageWithLoading 
                  src="https://images.unsplash.com/photo-1591291621164-2c6367723315?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                  alt="Bob and Brad Q2 Massage Gun" 
                  className="rounded-lg w-full h-auto" 
                />
              </div>
              <div className="order-2 md:order-1">
                <div className="flex items-center mb-4">
                  <div className="flex text-[#f8961e] mr-2">
                    <Star size={20} fill="#f8961e" />
                    <Star size={20} fill="#f8961e" />
                    <Star size={20} fill="#f8961e" />
                    <Star size={20} />
                    <Star size={20} />
                  </div>
                  <span className="font-bold">3.0/5.0</span>
                </div>
                <div className="bg-[#0a2540] p-6 rounded-lg mb-6">
                  <h3 className="text-xl font-bold mb-4">
                    Why It's Our Value Pick
                  </h3>
                  <ul className="space-y-3">
                    <li className="flex">
                      <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={18} />
                      <p>Exceptional performance at under $130</p>
                    </li>
                    <li className="flex">
                      <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={18} />
                      <p>32lb stall force handles most everyday needs</p>
                    </li>
                    <li className="flex">
                      <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={18} />
                      <p>Ultra-compact design fits easily in gym bags</p>
                    </li>
                    <li className="flex">
                      <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={18} />
                      <p>Developed by physical therapists</p>
                    </li>
                  </ul>
                </div>
                <div className="mb-6">
                  <span className="text-gray-300 mr-4">Price:</span>
                  <span className="text-xl font-bold">$129</span>
                </div>
                <div className="flex flex-col sm:flex-row gap-4">
                  <Button href="/reviews/bob-and-brad-q2">
                    Read Full Review
                  </Button>
                  <Button href="https://www.amazon.com/example" variant="secondary">
                    Check Price
                  </Button>
                </div>
              </div>
            </div>
            <p className="text-gray-300 mb-4">
              If you're looking for a quality massage gun without breaking the
              bank, the Bob and Brad Q2 offers remarkable value at just $129.
            </p>
            <p className="text-gray-300 mb-4">
              Created by two physical therapists with millions of YouTube
              followers, this compact device delivers impressive performance for
              its price point. The 32lb stall force won't satisfy professional
              athletes, but it's more than adequate for the average user
              treating everyday soreness and tension.
            </p>
            <p className="text-gray-300">
              During our testing, we were particularly impressed by its compact
              size and quieter operation compared to other budget models. While
              it lacks the premium features and power of our top picks, it
              provides about 70-80% of the therapeutic benefit at less than a
              quarter of the price of premium options.
            </p>
          </div>
        </div>
      </section>
      {/* Best Premium */}
      <section id="best-premium" className="py-16 px-4 md:px-8 bg-[#061a2c]">
        <div className="container mx-auto">
          <div className="max-w-4xl mx-auto">
            <div className="flex items-center mb-6">
              <div className="w-12 h-12 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mr-4">
                <Zap className="text-[#06d6a0]" size={24} />
              </div>
              <h2 className="text-3xl font-bold">Best Premium: Theragun Pro</h2>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
              <div>
                <ImageWithLoading 
                  src="https://images.unsplash.com/photo-1593164842264-854604db2260?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                  alt="Theragun Pro Massage Gun" 
                  className="rounded-lg w-full h-auto" 
                />
              </div>
              <div>
                <div className="flex items-center mb-4">
                  <div className="flex text-[#f8961e] mr-2">
                    <Star size={20} fill="#f8961e" />
                    <Star size={20} fill="#f8961e" />
                    <Star size={20} fill="#f8961e" />
                    <Star size={20} fill="#f8961e" />
                    <Star size={20} fill="#f8961e" />
                  </div>
                  <span className="font-bold">4.8/5.0</span>
                </div>
                <div className="bg-[#0a2540] p-6 rounded-lg mb-6">
                  <h3 className="text-xl font-bold mb-4">
                    Why It's Our Premium Pick
                  </h3>
                  <ul className="space-y-3">
                    <li className="flex">
                      <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={18} />
                      <p>
                        Industry-leading 60lb stall force and 16mm amplitude
                      </p>
                    </li>
                    <li className="flex">
                      <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={18} />
                      <p>Patented rotating arm with multi-grip handle</p>
                    </li>
                    <li className="flex">
                      <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={18} />
                      <p>
                        OLED screen with force meter and customizable presets
                      </p>
                    </li>
                    <li className="flex">
                      <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={18} />
                      <p>Two swappable batteries for 300+ minutes of use</p>
                    </li>
                  </ul>
                </div>
                <div className="mb-6">
                  <span className="text-gray-300 mr-4">Price:</span>
                  <span className="text-xl font-bold">$599</span>
                </div>
                <div className="flex flex-col sm:flex-row gap-4">
                  <Button href="/reviews/theragun-pro">Read Full Review</Button>
                  <Button href="https://www.amazon.com/example" variant="secondary">
                    Check Price
                  </Button>
                </div>
              </div>
            </div>
            <p className="text-gray-300 mb-4">
              For serious athletes, fitness professionals, or anyone who demands
              the absolute best recovery tool available, the Theragun Pro stands
              in a class of its own.
            </p>
            <p className="text-gray-300 mb-4">
              The Pro's combination of 60lb stall force and 16mm amplitude
              delivers the deepest tissue penetration of any consumer massage
              gun we tested. This translates to faster recovery times and more
              effective treatment for dense muscle groups.
            </p>
            <p className="text-gray-300">
              While the $599 price tag puts it firmly in the premium category,
              our testing showed that for the right users, the investment pays
              dividends in performance and recovery quality. Its rotating arm
              design, OLED screen with force meter, and app integration create
              an unmatched user experience that justifies the price for
              professionals and serious enthusiasts.
            </p>
          </div>
        </div>
      </section>
      {/* Most Portable */}
      <section id="best-portable" className="py-16 px-4 md:px-8">
        <div className="container mx-auto">
          <div className="max-w-4xl mx-auto">
            <div className="flex items-center mb-6">
              <div className="w-12 h-12 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mr-4">
                <Clock className="text-[#06d6a0]" size={24} />
              </div>
              <h2 className="text-3xl font-bold">Most Portable: Renpho Mini</h2>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8 md:flex-row-reverse">
              <div className="order-1 md:order-2">
                <ImageWithLoading 
                  src="https://images.unsplash.com/photo-1588286840104-8957b019727f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                  alt="Renpho Mini Massage Gun" 
                  className="rounded-lg w-full h-auto" 
                />
              </div>
              <div className="order-2 md:order-1">
                <div className="flex items-center mb-4">
                  <div className="flex text-[#f8961e] mr-2">
                    <Star size={20} fill="#f8961e" />
                    <Star size={20} fill="#f8961e" />
                    <Star size={20} fill="#f8961e" />
                    <Star size={20} />
                    <Star size={20} />
                  </div>
                  <span className="font-bold">3.2/5.0</span>
                </div>
                <div className="bg-[#0a2540] p-6 rounded-lg mb-6">
                  <h3 className="text-xl font-bold mb-4">
                    Why It's Our Portable Pick
                  </h3>
                  <ul className="space-y-3">
                    <li className="flex">
                      <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={18} />
                      <p>Ultra-compact design (just 6.7" long and 1.5 lbs)</p>
                    </li>
                    <li className="flex">
                      <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={18} />
                      <p>Fits in purses, briefcases, and carry-on luggage</p>
                    </li>
                    <li className="flex">
                      <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={18} />
                      <p>
                        Surprisingly powerful for its size (20lb stall force)
                      </p>
                    </li>
                    <li className="flex">
                      <CheckCircle className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={18} />
                      <p>Budget-friendly at just $79</p>
                    </li>
                  </ul>
                </div>
                <div className="mb-6">
                  <span className="text-gray-300 mr-4">Price:</span>
                  <span className="text-xl font-bold">$79</span>
                </div>
                <div className="flex flex-col sm:flex-row gap-4">
                  <Button href="/reviews/renpho-mini">Read Full Review</Button>
                  <Button href="https://www.amazon.com/example" variant="secondary">
                    Check Price
                  </Button>
                </div>
              </div>
            </div>
            <p className="text-gray-300 mb-4">
              For frequent travelers or those who need on-the-go recovery, the
              Renpho Mini delivers impressive performance in an incredibly
              compact package.
            </p>
            <p className="text-gray-300 mb-4">
              At just 6.7 inches long and weighing only 1.5 pounds, it's less
              than half the size of standard massage guns. Despite its
              diminutive dimensions, it still packs a respectable 20lb stall
              force and 9mm amplitude - enough for effective treatment of most
              superficial muscle groups.
            </p>
            <p className="text-gray-300">
              During our travel testing, we found it invaluable for quick relief
              after long flights or car rides. While it can't match the deep
              tissue penetration of our other picks, its extreme portability and
              budget-friendly price make it an excellent secondary device or
              starter option for those prioritizing convenience.
            </p>
          </div>
        </div>
      </section>
      {/* Buying Guide */}
      <section className="py-16 px-4 md:px-8 bg-[#061a2c]">
        <div className="container mx-auto">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-3xl font-bold mb-8">
              How to Choose a Massage Gun
            </h2>
            <div className="space-y-8">
              <div>
                <h3 className="text-xl font-bold mb-4">
                  Key Specifications Explained
                </h3>
                <div className="bg-[#0a2540] p-6 rounded-lg space-y-6">
                  <div>
                    <h4 className="font-bold mb-2">Stall Force</h4>
                    <p className="text-gray-300">
                      This is the amount of pressure (measured in pounds)
                      required to stop the motor. Higher stall force allows for
                      deeper pressure without the device stalling.
                    </p>
                    <div className="mt-2">
                      <p className="text-sm text-gray-400 mb-1">
                        Recommendation by user type:
                      </p>
                      <ul className="text-sm text-gray-300 list-disc pl-5">
                        <li>Average users: 30-40 lbs is sufficient</li>
                        <li>
                          Athletes/larger individuals: 40-50+ lbs recommended
                        </li>
                        <li>Professional use: 50+ lbs ideal</li>
                      </ul>
                    </div>
                  </div>
                  <div>
                    <h4 className="font-bold mb-2">Amplitude</h4>
                    <p className="text-gray-300">
                      The distance the massage head travels (measured in
                      millimeters). Higher amplitude means deeper penetration
                      into muscle tissue.
                    </p>
                    <div className="mt-2">
                      <p className="text-sm text-gray-400 mb-1">
                        Impact by range:
                      </p>
                      <ul className="text-sm text-gray-300 list-disc pl-5">
                        <li>8-10mm: Good for surface-level treatment</li>
                        <li>12-14mm: Effective for most users</li>
                        <li>
                          15mm+: Deep tissue penetration for dense muscles
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div>
                    <h4 className="font-bold mb-2">Speed Range</h4>
                    <p className="text-gray-300">
                      The percussions per minute (PPM) the device delivers. Most
                      quality massage guns offer multiple speed settings.
                    </p>
                    <div className="mt-2">
                      <p className="text-sm text-gray-400 mb-1">
                        Typical usage:
                      </p>
                      <ul className="text-sm text-gray-300 list-disc pl-5">
                        <li>1200-1700 PPM: Relaxation and recovery</li>
                        <li>1700-2200 PPM: Muscle activation and warming up</li>
                        <li>2200-2800 PPM: Deep tissue work and pain relief</li>
                      </ul>
                    </div>
                  </div>
                  <div>
                    <h4 className="font-bold mb-2">Battery Life</h4>
                    <p className="text-gray-300">
                      How long the device operates on a single charge. Longer
                      battery life is especially important for professional use
                      or travel.
                    </p>
                    <div className="mt-2">
                      <p className="text-sm text-gray-400 mb-1">
                        What to look for:
                      </p>
                      <ul className="text-sm text-gray-300 list-disc pl-5">
                        <li>2-3 hours: Standard for most quality devices</li>
                        <li>4+ hours: Premium feature for heavy users</li>
                        <li>
                          Swappable batteries: Ideal for professional settings
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <h3 className="text-xl font-bold mb-4">
                  Additional Features to Consider
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="bg-[#0a2540] p-6 rounded-lg">
                    <h4 className="font-bold mb-2">Noise Level</h4>
                    <p className="text-gray-300">
                      Massage guns can range from whisper-quiet (45-55 dB) to
                      fairly loud (75+ dB). Lower noise is preferable for home
                      use, especially in shared spaces.
                    </p>
                  </div>
                  <div className="bg-[#0a2540] p-6 rounded-lg">
                    <h4 className="font-bold mb-2">Attachments</h4>
                    <p className="text-gray-300">
                      Different head attachments target specific areas and
                      tissue types. Most quality devices include 4-6 attachments
                      for various uses.
                    </p>
                  </div>
                  <div className="bg-[#0a2540] p-6 rounded-lg">
                    <h4 className="font-bold mb-2">Ergonomics</h4>
                    <p className="text-gray-300">
                      Consider handle design, weight distribution, and reach for
                      self-treatment. Angled handles and multiple grip options
                      improve usability.
                    </p>
                  </div>
                  <div className="bg-[#0a2540] p-6 rounded-lg">
                    <h4 className="font-bold mb-2">Smart Features</h4>
                    <p className="text-gray-300">
                      App integration, pressure sensors, and automatic speed
                      adjustment can enhance the user experience but typically
                      add to the price.
                    </p>
                  </div>
                </div>
              </div>
              <div>
                <h3 className="text-xl font-bold mb-4">
                  Budget Considerations
                </h3>
                <div className="bg-[#0a2540] p-6 rounded-lg">
                  <div className="space-y-4">
                    <div>
                      <h4 className="font-bold mb-2">Budget ($50-150)</h4>
                      <p className="text-gray-300">
                        Expect basic functionality with moderate stall force
                        (20-35 lbs) and amplitude (8-10mm). Suitable for
                        occasional users with average needs.
                      </p>
                    </div>
                    <div>
                      <h4 className="font-bold mb-2">Mid-Range ($150-300)</h4>
                      <p className="text-gray-300">
                        The sweet spot for most users. These devices offer good
                        performance (35-50 lbs stall force, 10-12mm amplitude)
                        with better build quality and battery life.
                      </p>
                    </div>
                    <div>
                      <h4 className="font-bold mb-2">Premium ($300+)</h4>
                      <p className="text-gray-300">
                        Professional-grade devices with top-tier specifications
                        (50+ lbs stall force, 14-16mm amplitude), advanced
                        features, and superior build quality. Best for serious
                        athletes, professionals, or those with specific
                        therapeutic needs.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* FAQ Section */}
      <section className="py-16 px-4 md:px-8">
        <div className="container mx-auto">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-3xl font-bold mb-2">
              Frequently Asked Questions
            </h2>
            <p className="text-gray-400 mb-8">
              Click on question titles to expand detailed answers
            </p>
            <div className="space-y-4">
              {faqData.map((faq, index) => (
                <div key={index} className="bg-[#061a2c] rounded-lg border border-[#1a3a5c] overflow-hidden transition-all duration-200 hover:border-[#06d6a0] hover:border-opacity-30">
                  <button
                    onClick={() => toggleFAQ(index)}
                    onKeyDown={(e) => handleKeyDown(e, index)}
                    className="w-full p-6 text-left flex items-center justify-between hover:bg-[#0a2540] transition-colors focus:outline-none focus:bg-[#0a2540] focus:ring-2 focus:ring-[#06d6a0] focus:ring-opacity-50 group"
                    aria-expanded={expandedFAQ === index}
                    aria-controls={`faq-content-${index}`}
                  >
                    <h3 className="text-xl font-bold text-white pr-4 group-hover:text-[#06d6a0] transition-colors">
                      {faq.question}
                    </h3>
                    <div className="flex-shrink-0 ml-auto">
                      {expandedFAQ === index ? (
                        <ChevronUp className="text-[#06d6a0] transition-transform duration-200" size={24} />
                      ) : (
                        <ChevronDown className="text-gray-400 group-hover:text-[#06d6a0] transition-colors duration-200" size={24} />
                      )}
                    </div>
                  </button>
                  <div 
                    id={`faq-content-${index}`}
                    className={`transition-all duration-300 ease-in-out ${
                      expandedFAQ === index 
                        ? 'max-h-screen opacity-100' 
                        : 'max-h-0 opacity-0'
                    } overflow-hidden`}
                    aria-hidden={expandedFAQ !== index}
                  >
                    <div className="px-6 pb-6 pt-0">
                      <div className="border-t border-[#1a3a5c] pt-4">
                        <p className="text-gray-300 leading-relaxed">
                          {faq.answer}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      {/* Why Trust Us */}
      <section className="py-16 px-4 md:px-8 bg-[#061a2c]">
        <div className="container mx-auto">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-3xl font-bold mb-8">Why Trust Our Reviews</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
              <div className="bg-[#0a2540] p-6 rounded-lg">
                <h3 className="text-xl font-bold mb-4">Independent Testing</h3>
                <p className="text-gray-300">
                  We purchase all products with our own funds and never accept
                  manufacturer samples. Our testing process involves 20+ hours
                  with each device across multiple users and scenarios.
                </p>
              </div>
              <div className="bg-[#0a2540] p-6 rounded-lg">
                <h3 className="text-xl font-bold mb-4">Expert Team</h3>
                <p className="text-gray-300">
                  Our review team includes certified personal trainers, physical
                  therapists, and sports medicine professionals with collective
                  experience of 30+ years in recovery science.
                </p>
              </div>
              <div className="bg-[#0a2540] p-6 rounded-lg">
                <h3 className="text-xl font-bold mb-4">Transparent Process</h3>
                <p className="text-gray-300">
                  We use standardized testing protocols to evaluate each device
                  across 15 different metrics, from quantifiable measurements to
                  subjective user experience.
                </p>
              </div>
            </div>
            <p className="text-gray-300">
              While we do earn affiliate commissions on purchases made through
              our links, our recommendations are never influenced by potential
              earnings. We often recommend products that earn us no commission
              if we believe they're truly the best choice for our readers.
            </p>
          </div>
        </div>
      </section>
      {/* Final CTA */}
      <section className="py-16 px-4 md:px-8">
        <div className="container mx-auto">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl font-bold mb-6">
              Ready to Upgrade Your Recovery?
            </h2>
            <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
              Whether you're an athlete, fitness enthusiast, or someone looking
              for relief from everyday tension, the right massage gun can
              transform your recovery routine.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" href="#best-overall">
                See Our Top Pick
              </Button>
              <Button size="lg" variant="secondary" href="/reviews/massage-guns">
                Explore All Reviews
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>;
}